import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Modal, Tooltip, Spin, Row, Col, message, Tabs } from 'antd';
import {
  WeaRightMenu,
  WeaTab,
  WeaAlertPage,
  WeaReqTop,
  WeaTop,
  WeaNewScroll,
  WeaLeftRightLayout,
  WeaPopoverHrm,
  WeaBrowser,
  WeaLocaleProvider,
  WeaCheckbox
} from 'ecCom';
import SearchGroupBorderLeft from '../SearchGroupBorderLeft';
import WorkSummary from './WorkSummary';
import WorkPlan from './WorkPlan';
import LeftCom from './LeftCom';
import LoadLogs from '../../../public/loadlog/loadLogs';
import EditPlanModal from './EditPlanModal'
import Audit from './Audit'
import PlanCube from './Cube'
const TabPane = Tabs.TabPane;
const toJS = mobx.toJS;
const confirm = Modal.confirm;
const getLabel = WeaLocaleProvider.getLabel;

import * as Util from '../../../util/Util';
@inject('planProgramViewStore')
@observer
export default class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showSearchAd: false,
      topTab: [
        {
          title: getLabel('20617', '月报'),
          key: '1',
          viewcondition: '1',
        },
        {
          title: getLabel('20619', '周报'),
          key: '2',
          viewcondition: '2',
        },
      ],
      cardTab: [
        {
          title: getLabel('84011', '工作总结'),
          viewcondition: "1",
          key:'1'
        },
        {
          title: getLabel('18170', '工作计划'),
          viewcondition: "2",
          key:'2'
        },
        {
          title: getLabel('505884', '报告审批'),
          viewcondition: "3",
          key:'3'
        },
        {
          title: getLabel('32061', '操作日志'),
          viewcondition: "4",
          key:'4'
        }
      ],
      cubeCardTab: [
        {
          title: '建模',
          viewcondition: "1",
          key:'1'
        },
        {
          title: getLabel('505884', '报告审批'),
          viewcondition: "3",
          key:'3'
        },
        {
          title: getLabel('32061', '操作日志'),
          viewcondition: "4",
          key:'4'
        }
      ],
      tabKey: '1',
      tabSelectKey: '1',
      monthWeekSelectComDisplayKey: '',
      locationkey: '',
      currentSelectYear: '',
      currentSelectMonth: '',
      currentSelectWeek: '',
      showLeft: false,
      menu: this.getRightMenuButtons(),
      _height: Util.getCurrentHeight(),
      heightInit: false,
    };
    this.store = this.props.planProgramViewStore;
  }

  componentWillMount() {
    //一些初始化请求
    this.store.resourceid = ''
    this.store.resourcetype = ''
    this.store.getTemplateConfig();
    //设置windowkey
    Util.setWindowKeys("4", getLabel('16448', '模板设置'));
  }

  onSubClick = (ids, names) => {
    this.store.resourceid = ids;
    this.store.resourcetype = 4;
    this.store.resourcename = names
    this.store.getTemplateConfig();
  };
  getTopConfig = () => {
    let { menu } = this.state;

    return {
      title: (
        <div style={{ display: 'inline-block' }}>
          <span
            dangerouslySetInnerHTML={{ __html: this.store.result.titlename }}
          />
          <span className="mb-title" title={this.store.result.mbTitle}>
            {this.store.result.mbName ? "[" + this.store.result.mbName + "]" : ""}
          </span>

        </div>
      ),
      icon: <i className="icon-coms-implement" />,
      iconBgcolor: 'rgb(150, 53, 138)',
      buttons: this.getButtons(),
      showDropIcon: true,
      dropMenuDatas: this.getRightMenuButtons(),
    };
  };

  //顶部top组件设置
  getWeaReqTopConfig = () => {
    let { tabDatas } = this.store
    return {
      title: (
        <div style={{ display: 'inline-block' }}>
          <span
            dangerouslySetInnerHTML={{ __html: this.store.result.titlename }}
          />
          <span className="mb-title" title={this.store.result.mbTitle}>
            {this.store.result.mbName ? "[" + this.store.result.mbName + "]" : ""}
          </span>

        </div>
      ),
      icon: <i className="icon-coms-implement" />,
      iconBgcolor: 'rgb(150, 53, 138)',
      loading: this.store.loading,
      buttons: this.getButtons(),
      showDropIcon: true,
      dropMenuDatas: this.getRightMenuButtons(),
      tabDatas: tabDatas,
      selectedKey: this.store.tabSelectKey,
      onChange: e => {
        this.store.tabSelectKey = e;
        this.store.getTemplateConfig();
      },
    };
  };

  getRightMenuButtons = () => {
    const { buttonAuth,iscube } = this.props.planProgramViewStore;
    let buttonArray = [];
    let _this = this;

    if (buttonAuth.canSave && iscube!='1') {
      buttonArray.push({
        key: '2',
        icon: <i className="icon-coms-Save-as" />,
        content: getLabel('86', '保存'),
        onClick: this.saveTemplate
      });
    }

    if (buttonAuth.canDel && iscube!='1') {
      buttonArray.push({
        key: '1',
        icon: <i className="icon-coms-delete" />,
        content: getLabel('91', '删除'),
        onClick: key => {
          this.deleteTemplateConfig();
        },
      });
    }

    if (buttonAuth.canShare && iscube!='1') {
      buttonArray.push({
        key: '0',
        icon: <i className="icon-coms-organization-down" />,
        content: getLabel('19015', '同步'),
        onClick: key => {
          this.refs.templateShare.openModal();
        },
      });
    }

    return buttonArray;
  };

  getButtons = () => {
    const { buttonAuth ,isopencube,iscube,noDataMessage} = this.props.planProgramViewStore;
    let buttonArray = [];

    let _this = this;

    if (buttonAuth.canSave && iscube!='1') {
      buttonArray.push(
        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@94nfv4@save`} title={getLabel('509076', '保存自定义模板')}>
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@sc7ps8@save`}
            type="primary"
            onClick={this.saveTemplate}
          >
            {getLabel('86', '保存')}
          </Button>
        </Tooltip>
      );
    }

    if (buttonAuth.canDel && iscube!='1') {
      buttonArray.push(
        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@1gl9ru@delete`} title={getLabel('509077', '删除自定义模板')}>
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@mk7pta@delete`} type="primary" onClick={() => this.deleteTemplateConfig()}>
            {getLabel('91', '删除')}
          </Button>
        </Tooltip>
      );
    }

    if (buttonAuth.canShare && iscube!='1') {
      buttonArray.push(
        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@0f1epc@syncmodel`} title={getLabel('509078', '同步该模板给其他人员')}>
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1ujuy5@syncmodel`} type="primary" onClick={() => this.refs.templateShare.openModal()}>
            {getLabel('19015', '同步')}
          </Button>
        </Tooltip>
      );
    }

    if(!noDataMessage &&isopencube && iscube!='1' && buttonAuth.canSave ){
      buttonArray.push(
        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@e2k2im@enablemodel`} title={getLabel('517841','启用建模') }>
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@c5jiyw@enablemodel`} type="primary" onClick={() => {
            confirm({
              title: getLabel('508972', '确认提示'),
              content:getLabel('518158','确认启用建模吗？') ,
              onOk() {
                _this.store.setState("iscube","1")
                _this.store.saveTemplateConfig()
              },
              onCancel() { },
            });
            
          }}>
            {getLabel('517841','启用建模') }
          </Button>
        </Tooltip>
      );
    }

    if(!noDataMessage  &&isopencube && iscube == '1' && buttonAuth.canSave ){
      buttonArray.push(
        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@e5t7ho@closemodel`} title={getLabel('517842','关闭建模') }>
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dr8cj1@closemodel`} type="primary" onClick={() => {
            confirm({
              title: getLabel('508972', '确认提示'),
              content: getLabel('518159','确认关闭建模吗？')   ,
              onOk() {
                _this.store.setState("iscube","0")
                _this.store.saveTemplateConfig()
              },
              onCancel() { },
            });

          }}>
            {getLabel('517842','关闭建模') }
          </Button>
        </Tooltip>
      );
    }
    

    return buttonArray;
  };

  saveTemplate = (key) => {
    const content = this.store.getShowColumnsTotalWidth()

    let _this = this
    confirm({
      title: getLabel('508972', '确认提示'),
      content: content == '' ? getLabel('509075', '确认保存此模板设置吗?') : content,
      onOk() {
        _this.store.saveTemplateConfig();
      },
      onCancel() { },
    });
  }

  deleteTemplateConfig = () => {
    let _this = this;
    confirm({
      title: getLabel('508972', '确认提示'),
      content: getLabel('509079', '确认删除此模板设置吗?'),
      onOk() {
        _this.store.deleteTemplate();
      },
      onCancel() { },
    });
  };

  onReferenceChange = (ids, names, datas) => {
    this.store.referenceParam.ids = ids;
    this.store.referenceParam.names = names;
    if (ids) {
      this.store.doReference();
    }
  };

  getTabConfig = () => {
    let { topTab, selectedKey, showSearchAd } = this.state;
    const { tabSelectKey } = this.store;

    return {
      datas: this.store.tabDatas,
      showSearchAd: showSearchAd,
      keyParam: 'viewcondition', //主键
      selectedKey: tabSelectKey,
      onChange: e => {
        this.store.tabSelectKey = e;
        this.store.getTemplateConfig();
      },
    };
  };
  getRightMenuConfig = () => {
    return {
      datas: this.getRightMenuButtons(),
      showUrlItem: false,
      style: { height: '100vh' },
      collectParams:{
        favname:getLabel('16448','模板设置') ,
        favouritetype: 5,
        link: '/spa/workrelate/static/index.html?#/main/workrelate/plan/planIndex?menutype=4',
        importantlevel: 1,
    }
    };
  };

  getIsShowCheckBox=()=>{
    let { auth: { canedit, canview } , isshowsummary,isshowplan,setState } = this.store;
    let {tabKey} = this.state
    let viewAttr = canedit?2:1
    let value = tabKey=='1'?(isshowsummary!='0'?"1":'0'):(isshowplan!='0'?"1":'0')
    let title=tabKey=='1'?getLabel('84011', '工作总结'):getLabel('18170', '工作计划')
    if(tabKey=='1'||tabKey=='2' ){
      return <span className='is-show-checkbox' onClick={e=>e.stopPropagation()}>
      <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@y5dzzj`}
          helpfulTip={getLabel('516754','主页是否显示')+title }
          display="switch"
          viewAttr={viewAttr}
          value={value}
          onChange={e => {
            if(tabKey=='1'){
              setState('isshowsummary',e);
            }else{
              setState('isshowplan',e);
            }
          }}
        />
      </span>
    }else{
      return <span></span>
    }

  }


  render() {
    let { _height, cardTab, tabKey,cubeCardTab } = this.state;
    let { auth: { canedit, canview } ,buttonAuth, noDataMessage,isshowsummary,setState,iscube } = this.store;
    return (
      <div
        className="wea-workrelate-plan-program-view"
      >

        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@hj2tu3`} {...this.getRightMenuConfig()}>
          <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@boftxe`} spinning={this.store.loading}>
            <WeaReqTop ecId={`${this && this.props && this.props.ecId || ''}_WeaReqTop@rwk7j5`} {...this.getWeaReqTopConfig()} key="toptab">
              <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@538pj5`}
                isNew={true}
                leftWidth={220}
                leftCom={<LeftCom ecId={`${this && this.props && this.props.ecId || ''}_LeftCom@fk16tp`} />}
                showLeft={this.state.showLeft}
                onCollapse={showLeft => this.setState({ showLeft })}
              >
                {/* tab */}
                {!noDataMessage && <div>
                  {/* <WeaTab {...this.getTabConfig()} /> */}
                  <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@rrxapx`}
                    datas={iscube=='1'?cubeCardTab:cardTab}
                    keyParam="viewcondition" //主键
                    selectedKey={tabKey}
                    onChange={v => { this.setState({ tabKey: v }); this.store.getTemplateConfig() }}
                    buttons={[<span style={{"margin-right":"20px"}}>
                     {iscube!='1' &&  this.getIsShowCheckBox()}
                    </span>]}
                  />
                  {tabKey == '1' && iscube!='1'&& <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@l0b4ro`} style={{ height: _height - 150 }}>
                    <WorkSummary ecId={`${this && this.props && this.props.ecId || ''}_WorkSummary@7ga3mp`} />
                  </WeaNewScroll>}
                  {tabKey == '2' && iscube!='1'&&  <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@hc8ohv`} style={{ height: _height - 150 }}>
                    <WorkPlan ecId={`${this && this.props && this.props.ecId || ''}_WorkPlan@89iaow`} />
                  </WeaNewScroll>}
                  {tabKey == '3' &&  <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@7cvkhv`} style={{ height: _height - 150 }}>
                    <div className="report-audit">
                      <Audit ecId={`${this && this.props && this.props.ecId || ''}_Audit@txe8os`}></Audit>

                    </div>
                  </WeaNewScroll>}
                  {tabKey == '4' && <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@vis8p0`} style={{ height: _height - 150 }}>
                    <div className="operation-log">
                      <LoadLogs ecId={`${this && this.props && this.props.ecId || ''}_LoadLogs@p7frn9`} logsData={this.store.logs} />
                    </div>
                  </WeaNewScroll>}
                  {tabKey == '1' && iscube==1 &&<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@5yuhph`} style={{ height: _height - 150 }}>
                    <PlanCube ecId={`${this && this.props && this.props.ecId || ''}_PlanCube@zgn4lz`} />
                  </WeaNewScroll>}
                </div>
                }
                {noDataMessage && <div style={{ position: 'relative', height: 230 }}>
                  <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@jkllmm`} iconSize={100}>
                    <div style={{ color: '#f00' }}>
                      {noDataMessage}
                    </div>
                  </WeaAlertPage>

                </div>}
               
              </WeaLeftRightLayout>
            </WeaReqTop>
          </Spin>
        </WeaRightMenu>
        }

        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@boxj4v`}
          style={{ display: 'none' }}
          title={getLabel('19015', '同步')}
          ref="templateShare"
          type={17}
          isSingle={false}
          customized
          inputStyle={{ width: 200 }}
          onChange={(ids, names, datas) =>
            this.onReferenceChange(ids, names, datas)}
          viewAttr={buttonAuth.canSave ? '2' : '1'}
        />
        <EditPlanModal ecId={`${this && this.props && this.props.ecId || ''}_EditPlanModal@w0ek1y`} />

        <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@4eznor`} />
      </div>
    );
  }
}
